<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>y首页</title>
  <link rel="stylesheet" href="./font_4112181_enm9dw0tt0q/iconfont.css">
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <style type="text/css">
    .labaB {
      /* width: 360px; */
      width: 360px;
      /* width: 90vw; */
      margin: 0 auto;
      /* border: 1px solid #ff6700; */
      overflow: hidden;
    }

    .animate {
      /* padding-left:20px */
      padding-left: 2.6667vw;
      /* font-size: 30px; */
      font-size: 4vw;
      color: #fff;
      display: inline-block;
      white-space: nowrap;
      animation: 8s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
      0% {
        /* transform: translateX(200px);
        -webkit-transform: translateX(320px); */
        transform: translateX(200px);
        -webkit-transform: translateX(320px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    @-webkit-keyframes wordsLoop {
      0% {
        /* transform: translateX(200px);
        -webkit-transform: translateX(200px); */
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }

      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
  </style>

</head>

<body>
  <!-- 头部 -->
  <div class="header">

    <div class="tiao">
      <h3>智慧商城</h3>
    </div>
  </div>
  <div class="shousuo">
    <div class="kuang">
      <input type="text" placeholder="搜索你要找的商品">
      <span class="iconfont icon-sousuo"></span>
    </div>
  </div>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img
          src="http://cba.itlike.com/public/uploads/10001/20230320/6d239000de9c3f12aafa571349b63d22.jpg" alt=""></div>
      <div class="swiper-slide"><img
          src="http://cba.itlike.com/public/uploads/10001/20230320/5901a2e13e1075882950af75c98d0007.jpg" alt=""></div>
      <div class="swiper-slide"><img
          src="http://cba.itlike.com/public/uploads/10001/20230320/7143e84bf3dd41fa67b9675a9e5d81a3.jpg" alt=""></div>


    </div>
    <div class="swiper-pagination"></div>
  </div>
  <div class="lan">
    <div class="laba"> <img src="./img/1686283174419.jpg" alt=""></div>
    <div class="labaB">
      <p class="animate">智慧商城2.0全新上线，更多新品等你来选~</p>
    </div>

  </div>
  <div class="pic">
    <ul>

    </ul>
  </div>
  <div class="datu">
    <img src="#" alt="">
  </div>
  <div class="for">—— 猜你喜欢 ——</div>


  <div class="commodity">


  </div>
  </div>

  <!--  -->
  <div class="footer">
    <ul>
      <li>
        <span class="iconfont icon-shouye-zhihui"></span>

        <!-- <p>首页</p> -->
        <a href="#">首页</a>
      </li>
      <li data-id="2">
        <span data-id="2" class="iconfont icon-fenlei"></span>

        <a data-id="2" href="#">分类</a>
        <!-- <p>分类</p> -->
      </li>
      <li data-id="3">
        <span data-id="3" class="iconfont icon-gouwuche"></span>
        <!-- <p>购物车</p> -->

        <a data-id="3" href="#">购物车</a>
      </li>
      <li data-id="4">
        <span data-id="4" class="iconfont icon-wode"></span>

        <a data-id="4" href="#">我的</a>
        <!-- <p>我的</p> -->
      </li>
    </ul>
  </div>




  <!-- JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 轮播图
    let mySwiper
    // 全局 axios 默认值
    axios.defaults.baseURL = 'http://cba.itlike.com/public/index.php?s=/api'
    // 获取服务器数据
    async function axiosA() {
      const { data: res } = await axios({ url: '/page/detail', pageId: 0 })
      console.log(res.data)
      const items = res.data.pageData.items
      // console.log(items[0].type)
      document.querySelector('.tiao h3').innerHTML = res.data.pageData.page.params.title

      document.querySelector('.kuang input').placeholder = items[0].params.placeholder
      document.querySelector('.kuang input').type = items[0].type
      // items[1]时---------------------------------------------------------------------------
      console.log(items[1].data)
      console.log(items[1].data[2].link.form[0].value)

      document.querySelector('.swiper-wrapper').innerHTML = items[1].data.map(function (item) {
        return `<div class="swiper-slide"><img data-id='${item.link.form[0].value}'
          src=${item.imgUrl} alt=""></div>`
      }).join('')
      // 点击轮播图图片跳转到商品详情
      document.querySelectorAll('.swiper-wrapper img').forEach(function (item) {
        item.addEventListener('click', function () {
          // console.log(item.dataset.id)
          localStorage.setItem('shouji', JSON.stringify(item.dataset.id))
          location.href = '../智慧商城，商品详情/商品详情.html'
        })
      })

      // 轮播图
      mySwiper = new Swiper('.swiper', {
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
        // 自动切换
        autoplay: {
          delay: 1500,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        // 设置Slide的切换效果，默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
        effect: 'slide',
      })

      // items[2]时------------------------------------------------------------------------------
      // console.log(items[2])
      // console.log(items[2].style)
      document.querySelector('.animate').innerHTML = items[2].params.text
      document.querySelector('.labaB').style.color = items[2].style.textColor
      document.querySelector('.labaB').style.backgroundColor = items[2].style.background
      document.querySelector('.labaB').style.paddingTop = items[2].style.paddingTop
      // items[3]时----------------------------------------------------------------------------------------
      // console.log(items[3])
      // console.log(items[3].data)
      // console.log(items[3].style.background)
      document.querySelector('.pic ul').innerHTML = items[3].data.map(function (item) {
        return `<li class='liss'>
        <img src=${item.imgUrl} alt="">
        <p>${item.text}</p>
      </li>`
      }).join('')
      document.querySelector('.pic ul').style.backgroundColor = items[3].style.background
      document.querySelector('.pic ul').style.color = items[3].style.textColor
      // items[4]时------------------------------------------------------------------------------------------
      // console.log(items[4])
      // console.log(items[4].data[0].imgUrl)
      document.querySelector('.datu img').src = items[4].data[0].imgUrl
      // items[5]时--------------------------------------------------------------------------------------------
      // console.log(items[5])
      // console.log(items[5].params.content)
      document.querySelector('.for').innerHTML = `${items[5].params.content}`
      // items[6]时--------------------------------------------------------------------------------------------
      console.log(items[6].data)
      document.querySelector('.commodity').innerHTML = items[6].data.map(function (item) {
        return ` <div class="shouji" data-id='${item.goods_id}'>
      <div class="left">
        <img src=${item.goods_image} alt="">
      </div>
      <div class="right">
        <p>${item.goods_name}</p>
        <p>已售${item.goods_sales}件</p>
        <p>¥${item.goods_price_max}<span>${+item.goods_price_max > +item.line_price_max ? '' : `¥${item.line_price_max}`}</span></p>
      </div>
    </div>`
      }).join('')


      // 给commodity的每一个shouji注册事件
      const shoujis = document.querySelectorAll('.commodity .shouji')
      // console.log(shoujis)
      shoujis.forEach(function (item) {
        item.addEventListener('click', function () {
          // console.log(item.dataset.id)
          localStorage.setItem('shouji', JSON.stringify(item.dataset.id))
          location.href = '../智慧商城，商品详情/商品详情.html'
        })
      })

    }


    axiosA()
    // 点击事件-----新品首发

    document.querySelector('.pic').addEventListener('click', (e) => {
      if (e.target.tagName === 'LI' || e.target.tagName === 'IMG' || e.target.tagName === 'P') {
        // console.log('111')
        location.href = '../智慧商城分类板块/智慧商城分类板块.html'
      }
    })
    // 给大图片设置点击跳转
    document.querySelector('.datu').addEventListener('click', function () {
      location.href = '../智慧商城分类板块/智慧商城分类板块.html'
    })
    // 给底部导航设置点击跳转----事件委托
    document.querySelector('.footer ul').addEventListener('click', function (e) {
      if (e.target.tagName == 'LI' || e.target.tagName == 'SPAN' || e.target.tagName == 'A') {
        if (e.target.dataset.id == 2) {
          location.href = "../智慧商城分类板块/智慧商城分类板块.html"
        }
        if (e.target.dataset.id == 3) {
          location.href = "../智慧商城购物车/index.html"
        }
        if (e.target.dataset.id == 4) {
          location.href = "../个人中心/个人中心.html"
        }
      }
    })
  </script>



</body>

</html>